<template>
  <section class="">
    <div class="max-w-380 mx-auto flex justify-between items-center">
      <div class="text-[#272626] text-8 tracking-normal leading-14 font-bold">FACTORY TOUR</div>
      <a class="text-[#C00000] text-5 tracking-normal font-bold" href="/about-us">
        Learn More<span class="ml-1">➔</span>
      </a>
    </div>
    <div class="space-y-2">
      <div class="w-380 mx-auto">
        <swiper-container
          :slides-per-view="3"
          :slides-per-group="3"
          :space-between="40"
          :loop="true"
          :autoplay="{
            delay: 7000
          }"
        >
          <swiper-slide v-for="(image, index) in imagePaths1" :key="index">
            <figure class="w-128">
              <img :src="image.path" :alt="image.name" />
            </figure>
          </swiper-slide>
        </swiper-container>
      </div>
      <div class="w-380 mx-auto">
        <swiper-container
          :slides-per-view="3"
          :slides-per-group="3"
          :space-between="40"
          :loop="true"
          :autoplay="{
            delay: 5000
          }"
        >
          <swiper-slide v-for="(image, index) in imagePaths2" :key="index">
            <figure class="w-128">
              <img :src="image.path" :alt="image.name" />
            </figure>
          </swiper-slide>
        </swiper-container>
      </div>
    </div>
  </section>
</template>

<script setup>
const images1 = import.meta.glob('/src/images/home/FACTORY-TOUR-1-*.webp', { eager: true })

const imagePaths1 = Object.entries(images1).map(([key, value]) => ({
  path: value.default || value, // 对应导入的图片路径
  name: key.split('/').pop() // 提取文件名
}))

const images2 = import.meta.glob('/src/images/home/FACTORY-TOUR-2-*.webp', { eager: true })

const imagePaths2 = Object.entries(images2).map(([key, value]) => ({
  path: value.default || value, // 对应导入的图片路径
  name: key.split('/').pop() // 提取文件名
}))
</script>

<style scoped></style>
